<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <title>登录</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/login.css" />
</head>
<body>
    <div>
        <h1 class="titles">用户登录</h1>
        <div class="logos">
            <img class="logo" src="img/LOGO.png" alt="">
        </div>
        <form action="">
            <div class="resetUpwd">
                <img src="img/shouji.png" alt="" style="width: .26rem;">
                <input type="text" placeholder="请输入手机号码" class="resetUpwd-input" id="login-userName"/>
            </div>
            <div class="resetUpwd">
                <img src="img/mima.png" alt="" style="width: .3rem;">
                <input type="password" placeholder="请输入密码" class="resetUpwd-input" id="login-Password"/>
            </div>
            <div class="logon">   	
            	<input type="button" value="登录" id="logon-button"/>
            </div>
            <div class="forget">
                <a href="retrieve-password.html" class="c-5e">忘记密码</a>
                <a href="register.html" class="c-6e">新用户注册</a>
            </div>
        </form>
        <!--第三方-->
        <div>
            <div class="three-logon">
                <h2 class="three-logons">第三方登录</h2>
            </div>
            <div class="flex three">
                <div class="third">
                    <a href="">
                        <img src="img/weixin.png" alt="">
                        <p>微信登录</p>
                    </a>
                </div>
                <div class="third">
                    <img src="img/qq.png" alt="">
                    <p>QQ登录</p>
                </div>
                <div class="third">
                    <img src="img/weibo.png" alt="">
                    <p>微博登录</p>
                </div>
            </div>

        </div>

    </div>
    <script src="js/x_rem.js"></script>
    <script src="js/jquery.js"></script>
	<script src="js/all.js"></script>
	<script>
		(()=>{
			//
			var userName = $("#login-userName");
			var Password = $("#login-Password");
			
			
			$("#logon-button").click(()=>{
				if(!vali(userName, /^1[0-9]{10}$/, "请输入正确的手机号")){
					
				}else if(!vali(Password, /^[a-zA-Z0-9_]{6}$/ , "请输入正确的密码格式")){
					
				}else{
					$.ajax({
						type:"post",
						url:Url+"/user/mobilePhoneLogin",
						xhrFields:{
							withCredentials: true
						},
						data:{
							"userName": userName.val(),
							"Password":Password.val()
						},
						success:((data)=>{
							console.log(data);
							
							popup(data.message);
							if(data.success){
								window.localStorage.userName = userName.val();   //账号
								window.localStorage.Password = Password.val();   //密码
								
   								location.href = "home-page.html";
							}
						}),
						error:((error)=>{
							console.log(error);
						})
					})
				}
				
			});
		
			
			 
		 
			
		})();
		
		
		
		
		
	</script>
</body>
</html>